<template>
  <div>
      <detail-banner 
        :sightName='sightName' 
        :bannerImg='bannerImg'
        :bannerImgs='gallaryImgs'
      >
      </detail-banner>
      <detail-header></detail-header>
      <div class="content">
        <detail-list :list='list' :abc='asd'></detail-list>
      </div>
  </div>
</template>

<script>
import DetailBanner from './compontents/banner.vue'
import DetailHeader from './compontents/header.vue'
import DetailList from './compontents/list.vue'
import axios from 'axios'
export default {
    name:'Detail',
    components:{
      DetailBanner,
      DetailHeader,
      DetailList
    },
    data(){
      return{
        sightName:'',
        bannerImg:'',
        gallaryImgs:[],
        categoryList:[],
        list:[],
        asd:'123'
      }
    },
    methods:{
      getDetailInfo(){
        axios.get('static/mock/detail.json',{
          params:{
            id:this.$route.params.id
          }
        }).then(this.handleGetDataSucc)
      },
      handleGetDataSucc(res){
        res=res.data;
        if(res.ret&&res.data){
          const data=res.data;
          this.sightName=data.sightName;
          this.bannerImg=data.bannerImg;
          this.gallaryImgs=data.gallaryImgs;
          this.list=data.categoryList;
        }
      }
    },
    mounted(){
      this.getDetailInfo()
    }
}
</script>

<style scoped>
.content{
  height: 50rem;
}
</style>